<template>
  <section class='f-phone-recharge'>
    <van-cell-group class="f-cell-group" v-if="!flag">
      <van-cell title="我的充值链接" is-link @click="toDetail(1)" />
    </van-cell-group>

    <template v-if="supplierList.length">
      <p class="f-text">供应商充值链接</p>
      <van-cell-group class="f-cell-group">
        <van-cell v-for="item in supplierList" :key="item.shopId" :title="item.shopName" is-link
          @click="toDetail(2,item.shopId)" />
      </van-cell-group>
    </template>

    <section v-if="!supplierList.length && flag" class="f-center" style="margin-top:87px">
      <img style="width:119px;height:106px" src="@/assets/imgs/jhh_pic_none.png" alt="">
      <p style="font-size: 19px;color: #2E77EE;font-weight: 500;margin-top:5px">内容未找到</p>
      <p style="font-size: 13px;color: #424242;margin-top:13px">您可前往淏咖宝网页版店铺信息中设置充值链接</p>
    </section>

  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'
import { getStore } from '@/utils/utils';
import { closeToast } from 'vant';

export default {
  name: 'PhoneRecharge',
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      shopId: '',
      supplierList: [],
      flag: false,
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '选择充值链接',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightText: '',
      });

      getMySupplierGuideList()
      getShopInfo()
    })

    const getMySupplierGuideList = () => {
      api.mySupplierGuideList().then(res => {
        state.supplierList = res.data
      })
    }

    const getShopInfo = () => {
      api.shopInfo().then(res => {
        if (!res.data.rechargeQr) {
          state.flag = true
        }
      })
    }

    const toDetail = (type, e) => {
      let shopId = type == 1 ? getStore('USER_INFO').companyId : e

      router.push({
        path: "/index/phoneRecharge/detail",
        query: {
          type,
          shopId
        }
      })
    }

    const addCacheRoute = () => {
      store.commit("addCacheRoute", 'PhoneRecharge');
    }

    return {
      ...toRefs(state),
      toDetail
    }
  }
}
</script>
<style lang='scss' scoped>
.f-phone-recharge {
  .f-text {
    font-size: 14px;
    color: #000000;
    margin: 26px 0 11px 15px;
  }
}
</style>